<template>
	<view class="container qiun-columns bg-w">
		<view class="header uni-flex uni-row flex-between header-nav">
			<uni-nav-bar title="统计">
			</uni-nav-bar>
		</view>
		<view class="position-r-top">
			<view class="statistics-tab">
				<view class="tab-item tab-left-item " :class="{'active':tabCurrent === 1}" @click="tabClick(1)">
					项目
				</view>
				<view class="tab-item tab-center-item" :class="{'active':tabCurrent === 2}" @click="tabClick(2)">
					维护
				</view>
				<view class="tab-item tab-right-item" :class="{'active':tabCurrent === 3}" @click="tabClick(3)">
					人员
				</view>
			</view>
			<view class="statistics">
				<view v-if="showPies && tabCurrent!=2" class="qiun-charts border-bottom">
					<view class="title-box">
						<view class="tip">
						</view>
						<view v-show="tabCurrent==1" class="title fb fs-16 color-6">
							项目进度统计
						</view>
						<view v-show="tabCurrent==3" class="title fb fs-16 color-6">
							考勤统计
						</view>
					</view>
					<view v-if="tabCurrent==3" class="picker-personal">
						<picker @change="bindPickerAttendance" :value="pickerIndex" :range="pickerArray">
							<view class="uni-input">{{pickerArray[pickerIndex]}}</view>
						</picker>
					</view>
					<canvas v-if="tabCurrent==1" id="canvasPie" canvas-id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
					<canvas v-if="tabCurrent==3" id="canvasPiePersonal" canvas-id="canvasPiePersonal" class="charts" @touchstart="touchPie"></canvas>
				</view>
				<view v-if="showColumns" class="qiun-charts border-bottom">
					<view class="title-box">
						<view class="tip">
						</view>
						<view v-if="tabCurrent==1" class="title fb fs-16 color-6">
							项目质量同比
						</view>
						<view v-if="tabCurrent==2" class="title fb fs-16 color-6">
							维护结果统计
						</view>
						<view @click="handleWork" v-if="tabCurrent==3" class="title fb fs-16 color-6">
							未完成任务统计
						</view>
					</view>
					<view v-if="tabCurrent==3" class="picker-personal">
						<picker @change="bindPickerChange" :value="pickerIndex1" :range="pickerArray">
							<view class="uni-input">{{pickerArray[pickerIndex1]}}</view>
						</picker>
					</view>
					<canvas v-if="tabCurrent==1" type="2d" id="canvasColumn" canvas-id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
					<canvas v-if="tabCurrent==2" type="2d" id="canvasColumnWh" canvas-id="canvasColumnWh" class="charts" @touchstart="touchColumnPersonal"></canvas>
					<canvas v-if="tabCurrent==3" id="canvasLine" canvas-id="canvasLine" disable-scroll='true' class="charts"
					 @touchstart="touchLine" @touchmove="moveLine" @touchend="touchEndLine"></canvas>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js'
	import {proStatus,proYearNum,maintainNum,attendance,noFinishedTask} from '@/common/api/statistic.js'
	import {getRecord } from "@/common/api/MaintainAudit.js"
	let _self;
	export default {
		data() {
			return {
				statusHeight:'',
				showColumns: false,
				showPies: false,
				tabCurrent: 1,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				canvasPie: null,
				canvaColumn: null,
				canvasLine: null,
				colors: ["#F39A7B", "#89A3E7", "#95E1B6", "#F3B777", "#FE93F8", "#E26F6F", "#9FD7FC"],
				Pie: {
					"series": [{
						"name": "未派工",
						"data": 0,
						"code": 0
					}, {
						"name": "未开始",
						"data": 0,
						"code": 1
					}, {
						"name": "进行中",
						"data": 0,
						"code": 2
					}, {
						"name": "已逾期",
						"data": 0,
						"code": 3
					}, {
						"name": "超期已竣工",
						"data": 0,
						"code": 4
					}, {
						"name": "已竣工",
						"data": 0,
						"code": 5
					}, {
						"name": "已验收",
						"data": 0,
						"code": 6
					}]
				},
				PiePersonal: {
					"series": [{
						"name": "正常打卡",
						"data": 0,
						"code": 0
					}, {
						"name": "请假次数",
						"data": 0,
						"code": 1
					}, {
						"name": "补卡次数",
						"data": 0,
						"code": 2
					}]
				},
				attendance:['正常打卡','请假次数','补卡次数'],
				pieTitle: '项目总数', //饼状图title
				chartData: {
					"categories": ["0-60", "60-70", "70-80", "80-90", "90-100"],
					"series": []
				}, //项目柱状图
				chartDataWh: {
					"categories": ["较差", "一般", "良好", "优秀"],
					"series": []
				}, //维护柱状图,
				years: [2021],
				total: 0,
				LineData: {
					"categories": [],
					"series": []
				},
				pickerArray: ['今日', '本周', '本月'],
				pickerIndex:0,//0今日，1本周，2本月，3本季度，本年
				pickerIndex1:0,//0今日，1本周，2本月，3本季度，本年
				splitNumber:5,
				page: {
					pageNo: 1,
					pageSize: 20,
					keyword:'',
				},
				max:5,
			}
		},
		onLoad() {
			// this.showRemindMessage(1);
			_self = this;
			let hours=[];
			for(let i=1;i<=24;i++){
				hours.push(i)
			}
			this.LineData.categories=hours;
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(500);
			this.getPieServerData(1);
			this.getColumnServerData(1);
		},
		methods: {
			tabClick(n) {
				this.tabCurrent = n;
				this.showColumns=false;
				this.showPies=false;
				this.getPieServerData(n);
				this.getColumnServerData(n);
				this.getLineServerData(n);
				if (n == 1) {
					this.pieTitle = '项目总数';
					this.splitNumber=5
				}else if( n== 2){
					this.splitNumber=3
				}else if (n == 3) {
					this.pieTitle = null;
					this.total=null;
				}
			},
			dataSort(data) {
				let arr = [0, 0, 0, 0, 0];
				for (let i in data) {
					if (i <= 60) {
						arr[0] = data[i];
					} else if (i <= 70) {
						arr[1] = data[i];
					} else if (i <= 80) {
						arr[2] = data[i];
					} else if (i <= 90) {
						arr[3] = data[i];
					} else {
						arr[4] = data[i];
					}
				}
				return arr;
			},
			getColumnServerData(i) {
				if (i == 1) {
					this.chartData.series = []
					this.years.map((year, index) => {
						proYearNum(year).then(res => {
							if (res.code == "20000") {
								let data = this.dataSort(res.data[year]);
								this.chartData.series.push(Object.assign({}, {
									name: year
								}, {
									data: data
								}, {
									color: this.colors[index]
								}));
								let max=data.reduce((num1, num2) => {
									return num1 > num2 ? num1 : num2
								})
								this.max=max + 5 - max % 5
								this.showColumns = true;
								this.showColumn("canvasColumn", this.chartData);
							}
						})
					});
				} else if (i == 2) {
					this.chartDataWh.series = []
					maintainNum().then(res=>{
						if(res.code){
							let data=[res.data.poor, res.data.average, res.data.good, res.data.excellent]
							this.chartDataWh.series.push(Object.assign({}, {
								name: '维护'
							}, {
								data: data
							}, {
								color: this.colors[0]
							}));
							let max=data.reduce((num1, num2) => {
								return num1 > num2 ? num1 : num2
							})
							this.max=max + 5 - max % 5
							this.showColumns=true;
							this.showColumn("canvasColumnWh", this.chartDataWh);
						}
					})
				}

			},
			getPieServerData(i) {
				if (i == 1) {
					proStatus().then(res => {
						if (res.code == "20000") {
							this.total = null;
							res.data.map(item => {
								this.total += item.total
								this.Pie.series.forEach(status => {
									status.data = status.code == item.projectStatus ? item.total : status.data;
								})
							})
							this.showPies = true;
							this.showPie("canvasPie", this.Pie);
						}
					})
				} else if (i == 3) {
					attendance(this.pickerIndex).then(res => {
						if (res.code == "20000") {
							res.data.map( item => {
								this.PiePersonal.series.forEach(status=>{
									status.data=status.code==item.clockStatus ? item.total : status.data
								})
							})
							this.showPies = true;
							this.showPie("canvasPiePersonal", this.PiePersonal);
						}
					})
				}

			},
			// 考勤统计下拉框切换
			bindPickerAttendance(e){
				this.pickerIndex = e.target.value;
				this.getPieServerData(this.tabCurrent)
			},
			// 未完成任务下拉框切换
			bindPickerChange(e) {
				let index=e.target.value;
				this.pickerIndex1 = e.target.value
				let date =new Date()
				let lastDay=new Date(date.getFullYear(),date.getMonth()+1,0).getDate()//获得是标准时间,需要getDate()获得天数
				let dayNum=[];
				let hours=[];
				for(let i=1;i<=24;i++){
					hours.push(i)
				}
				for(let i=1;i<=lastDay;i++){
					dayNum.push(i)
				}
				switch (index){
					case 0:this.LineData.categories=hours;break;
					case 1:this.LineData.categories=[1,2,3,4,5,6,7];break;
					case 2:this.LineData.categories=dayNum;break;
				}
				this.getLineServerData(3);
			},
			getLineServerData(i) {
				if (i == 3) {
					this.LineData.series = [],
					noFinishedTask(this.pickerIndex1+1).then(res=>{
						if (res.code == "20000") {
							let data=res.data.map(obj=>{return obj.count})
							let max=data.reduce((num1, num2) => {
								return num1 > num2 ? num1 : num2
							})
							this.max=max + 5 - max % 5
							this.LineData.series.push(Object.assign({}, {
								name: '人数'
							}, {
								data: data
							},{
								color: "#0defdd"
							}));
							this.showColumns=true;
							this.showLine("canvasLine", this.LineData);
						}
					})
					
				}
			},
			showPie(canvasId, chartData) {
				this.canvasPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					padding: [5, 0, 5, 0],
					legend: {
						show: true,
						position: 'right',
						float: 'center',
						itemGap: 10,
						padding: 0,
						lineHeight: 26,
						margin: 0,
						borderWidth: 1
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					disablePieStroke: true,
					extra: {
						pie: {
							lableWidth: 15,
							ringWidth: 0,
						}
					},

					title: {
						name: _self.pieTitle,
						color: '#7cb5ec',
						fontSize: 16 * _self.pixelRatio,
						offsetY: 0,
					},
					subtitle: {
						name: _self.total,
						color: '#7cb5ec',
						fontSize: 16 * _self.pixelRatio,
						offsetY: 2,
					},
					colors: _self.colors
				});
			},
			showColumn(canvasId, chartData) {
				this.canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true,
						position: 'right',
						itemGap: 20,
						lineHeight: 26
					},
					fontSize: 11,
					background: '#fff',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					enableScroll: true,
					showTitle:true,
					xAxis: {
						disableGrid: true,
						calibration: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						itemGap: 10,
					},
					yAxis: {
						title:'数量',
						disableGrid: true,
						temCount: 3,
						min:0,
						max:this.max,
						splitNumber:5,
						format: (val) => {
							return val.toFixed(0)
						},
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							meter: {
								fillColor: "#aaa"
							},
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.25 / chartData.categories.length //每个柱形图宽度
						},
						area: {
							gradient: true
						}
					},
					itemStyle: {
						normal: {
							width: 10
						}
					},
					colors: _self.colors,
					padding: [25, 15, 4, 15], //显示图表
				})
			},
			showLine(canvasId, chartData) {
				this.canvasLine = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding:[30,0,4,15],
					legend: {
						show: false,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						lineHeight: 18,
						margin: 0,
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					enableScroll:true,
					animation: true,
					xAxis: {
						type: 'grid',
						disableGrid: true,
						scrollShow:true,
						// scrollBackgroundColor:'#eee',
						scrollColor:'#ddd',
						itemCount: 12,
						// boundaryGap: 'justify' //两端不留白配置
					},
					yAxis: {
						disableGrid: true,
						splitNumber: 5,
						// title: '人数', //Y轴标题
						// format: (val) => {
						// 	return val.toFixed(1)
						// },
						showTitle:true,
						data:[{
							title:'人数',
							format: (val) => {
								return val.toFixed(0)
							},
							min:0,
							max:this.max
						}]
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 1,
							addLine: false,
							width: 2,
							gradient:true,
						}
					},
					colors: _self.colors,
				});

			},
			// 项目饼状图点击
			touchPie(e) {
				this.canvasPie.showToolTip(e, {
					format:(item)=>{
						return item.name + ':' + item.data
					}
				});
				this.canvasPie.touchLegend(e, {
					animation: true
				});
				var legendIndex = this.canvasPie.getLegendDataIndex(e);
				if (legendIndex != -1) {
					this.total = 0;
					this.Pie.series.forEach(item => {
						this.total += item.show ? item.data : 0;
					})
					this.canvasPie.updateData({
						subtitle: {
							name: this.total
						}
					})
				}

			},
			// 项目柱状图点击
			touchColumn(e) {
				console.log(e)
				// this.canvaColumn.showToolTip(e, {
				// 	format: function (item, category) {
				// 		if(typeof item.data === 'object'){
				// 			return category + ' ' + item.name + ':' + item.data.value 
				// 		}else{
				// 			return category + ' ' + item.name + ':' + item.data 
				// 		}
				// 	}
				// });
				this.canvaColumn.touchLegend(e, {
					animation: true
				});
				// let legendIndex= this.canvaColumn.getLegendDataIndex(e);
			},
			touchColumnPersonal(e) {
				this.canvaColumn.touchLegend(e, {
					animation: true
				});
				getRecord(this.page).then(res => {
					if(res.code == 20000){
						if(res.data.records.length>0){
							uni.navigateTo({
								url:'/pages/Application/MaintainAudit/MaintainRecord/MaintainRecord'
							})
						}
					}
				})
			},
			// 折线图
			touchLine(e) {
				this.canvasLine.scrollStart(e);
				
			},
			handleWork(){
				uni.navigateTo({
					url:'/pages/Application/WorkPlan/WorkPlan'
				})
			},
			moveLine(e) {
				this.canvasLine.scroll(e);
			},
			touchEndLine(e) {
				this.canvasLine.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				this.canvasLine.showToolTip(e, {
					format:(item,category)=>{
						// return category + ' ' + item.name + ':' + item.data
						return item.name + ':' + item.data
					}
				});
			},
		},
		touchLegend(e, options){
			
		}
	}
</script>

<style lang="less" scoped>
	/* page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
.qiun-padding{padding:2%; width:96%;}
.qiun-wrap{display:flex; flex-wrap:wrap;}
.qiun-rows{display:flex; flex-direction:row !important;}
.qiun-columns{display:flex; flex-direction:column !important;}
.qiun-common-mt{margin-top:10upx;}
.qiun-bg-white{background:#FFFFFF;}
.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}
.qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000} */
	/* 通用样式 */
	.statistics-tab{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		width: 100%;
		z-index: 9999;
	}
	.top-tab {
		border-radius: 6px;
	}

	.tab-left-item {
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	.tab-center-item {
		border-left: none !important;
		border-right: none !important;
	}

	.tab-right-item {
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}

	.tab-item {
		padding: 4px 20px;
		border: 1px solid #fff;
		background-color: #fff;
		color: #333;
		border: 2rpx solid #eee;
	}

	.active {
		background-color: #09AAE9;
		color: #fff;
		border-color: #09AAE9;
	}
	.statistics{
		margin-top: 60rpx;
	}
	.qiun-columns {
		display: flex;
		flex-direction: column !important;
		overflow-y: scroll;
	}

	.qiun-charts {
		padding: 20px 10px;
		box-sizing: border-box;
	}

	.charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.title-box {
		height: 25px;
		line-height: 25px;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tip {
		width: 4px;
		height: 14px;
		background-color: #666;
		margin-right: 6px;
		border-radius: 6rpx;
	}

	/* .statistics{padding-top: 69px;} */
	.picker-personal{
		position: relative;
		height: 60rpx;
		/deep/.uni-input{
			width: 100rpx;
			text-align: center;
			padding: 10rpx;
			border-radius: 6rpx;
			position: absolute;
			right: 0;
			top: 0;
			background: #09aae9;
			color: #fff;
			text-indent: -20rpx;
		}
		/deep/.uni-input:after{
			content: '';
			position: absolute;
			top: 50%;
			right: 10rpx;
			width: 0;
			height: 0;
			border-right: 8rpx solid transparent;
			border-left: 8rpx solid transparent;
			border-top: 12rpx solid #fff;
			transform: translateY(-50%);
		}
	}
</style>
